<template>
  <div class="main case-detail">
    <div
      style="height: 30px; color: blue; display: flex; align-items: center"
      v-if="info"
    >
      <span>流水号：{{ info.CS_No }}</span>
      <span style="margin-left: 20px">{{ info.CS_DisplayName }}</span>
    </div>
    <el-tabs type="border-card" style="height: 95%">
      <el-tab-pane label="基本信息">
        <caseInfo :caseId="caseId"></caseInfo>
      </el-tab-pane>
      <el-tab-pane label="案件（公司/员工）管理">
        <caseEmployee :caseId="caseId"></caseEmployee>
      </el-tab-pane>
      <el-tab-pane label="任务管理">
        <caseJob :caseId="caseId"></caseJob>
      </el-tab-pane>
      <el-tab-pane label="公估日志">
        <caseLog :caseId="caseId"></caseLog>
      </el-tab-pane>
      <el-tab-pane label="其他案件流程">
        <caseOtherForm :caseId="caseId"></caseOtherForm>
      </el-tab-pane>
      <el-tab-pane label="案件成本">
        <caseCost :caseId="caseId"></caseCost>
      </el-tab-pane>
      <el-tab-pane label="费用报销">
        <caseExpense :caseId="caseId"></caseExpense>
      </el-tab-pane>
      <el-tab-pane label="出差记录">
        <caseTravel :caseId="caseId"></caseTravel>
      </el-tab-pane>
      <el-tab-pane label="开票申请">
        <caseBillApply :caseId="caseId"></caseBillApply>
      </el-tab-pane>
      <el-tab-pane label="贡献管理">
        <caseContribution :caseId="caseId" :caseInfo="info"></caseContribution>
      </el-tab-pane>
      <el-tab-pane label="案件应付款">
        <caseIncome :caseId="caseId" :caseInfo="info"></caseIncome>
      </el-tab-pane>
      <el-tab-pane label="相关文件、照片">
        <caseFile :caseId="caseId"></caseFile>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getCase } from '@/api/core/case'
import caseInfo from './components/caseInfo.vue'
import caseJob from './components/caseJob.vue'
import caseLog from './components/caseLog.vue'
import caseOtherForm from './components/caseOtherForm.vue'
import caseEmployee from './components/caseEmployee.vue'
import caseCost from './components/caseCost.vue'
import caseExpense from './components/caseExpense.vue'
import caseTravel from './components/caseTravel.vue'
import caseBillApply from './components/caseBillApply.vue'
import caseContribution from './components/caseContribution.vue'
import caseIncome from './components/caseIncome/caseIncome.vue'
import caseFile from './components/caseFile.vue'
import '@/styles/variables.scss'
export default {
  components: {
    caseInfo,
    caseBillApply,
    caseContribution,
    caseCost,
    caseEmployee,
    caseExpense,
    caseFile,
    caseIncome,
    caseJob,
    caseLog,
    caseTravel,
    caseOtherForm,
  },
  data: function () {
    return {
      info: null,
      caseId: 0,
    }
  },
  methods: {
    getCase() {
      getCase(this.caseId).then(({ data }) => {
        this.info = data
      })
    },
  },
  created: function () {
    this.caseId = this.$route.query.caseId
    if (!this.caseId) {
      return
    }
    this.getCase()
  },
}
</script>
<style>
.case-detail .el-tabs__content {
  height: 100%;
}
.case-detail .el-tabs {
  height: 100%;
}
.el-drawer.rtl {
  overflow: scroll;
}
.case-detail .el-tab-pane {
  height: 100%;
}
.case-detail .el-tabs__content {
  height: calc(100% - 50px);
}
.case-detail .el-tabs {
  height: calc(100% - 80px);
}
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped lang="scss">
.main {
  height: 98%;
}
.el-tabs__content {
  height: 100%;
}
</style>
